<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/7/22
  Time: 20:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>影片管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/back/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/back/layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>组件</cite></a>
        <a><cite>数据表格</cite></a>
        <a><cite>开启头部工具栏</cite></a>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <table class="layui-hide" id="test-table-toolbar" lay-filter="test-table-toolbar"></table>

                    <script type="text/html" id="test-table-toolbar-toolbarDemo">
                        <div class="test-table-reload-btn" style="margin-bottom: 10px;">
                            影片名称：
                            <div class="layui-inline">
                                <input class="layui-input" name="filmName" id="searchFilmName" autocomplete="off">
                            </div>
                            <div class="layui-inline">
                                <label style="width:90px" class="layui-form-label">上映时间</label>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input" id="searchFilmReleaseTime" placeholder="yyyy-MM-dd" lay-key="9">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label style="width:90px" class="layui-form-label">影片状态</label>
                                <div class="layui-input-inline">
                                    <select name="label" id="searchFilmStatus">
                                        <option value="">请选择标签</option>
                                        <option value="0">上架</option>
                                        <option value="1">下架</option>
                                    </select>
                                </div>
                            </div>
                            <button class="layui-btn" data-type="reload" id="search" >搜索</button>
                        </div>
                        <div class="layui-btn-container">
                            <button type="button" id="insertFilm" class="layui-btn"><i class="layui-icon"></i>添加影片</button>
                            <button type="button" id="exportFilm" class="layui-btn layui-btn-radius">导出eccel文件</button>
                        </div>
                    </script>

                    <script type="text/html" id="test-table-toolbar-barDemo">
                        <button type="button" class="layui-btn layui-btn-sm" lay-event="detail" id="detail"><i class="layui-icon layui-icon-form"></i></button>
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
                        <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del"><i class="layui-icon layui-icon-delete"></i></button>
                        <button type="button" class="layui-btn layui-btn-warm layui-btn-sm" lay-event="playCover"><i class="layui-icon layui-icon-picture"></i></button>
                        <button type="button" class="layui-btn layui-btn-warm layui-btn-sm" lay-event="playPrevue"><i class="layui-icon layui-icon-video"></i></button>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="${pageContext.request.contextPath}/back/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '${pageContext.request.contextPath}/back/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table','laydate','form'], function(){
        var admin = layui.admin
            ,table = layui.table // 表格
            ,layer = layui.layer // 弹层
            ,form = layui.form // form表单
            ,laypage = layui.laypage // 分页
            ,laydate = layui.laydate // 时间
            ,$=layui.$; // $

        //常规用法
        // 时间格式
        laydate.render({
            elem: '#searchFilmReleaseTime'
            ,type: 'date'
        });
        laydate.render({
            elem: '#addFilmRunTime'
            ,type: 'time'
        });
        laydate.render({
            elem: '#addFilmReleaseTime'
            ,type: 'date'
        });
        laydate.render({
            elem: '#editFilmRunTime'
            ,type: 'time'
        });
        laydate.render({
            elem: '#editFilmReleaseTime'
            ,type: 'date'
        });
        var cols =  [[
             {field:'filmName', title:'影片名称', width:200, edit: 'text'}
            ,{field:'filmContent', title:'影片简介', width:550, edit: 'text'}
            ,{field:'filmRunTime', title:'播放时长', width:160, edit: 'text', sort: true}
            ,{field:'filmReleaseTime', title:'上映时间', width:160, sort: true}
            ,{field:'filmStatus', title:'影片状态 ', width:160, templet : function (data) {
                    var filmStatus = data.filmStatus;
                    if (filmStatus == 0) {
                        return "上架";
                    } else if (filmStatus == 1) {
                        return "下架";
                    }
                }}
            ,{fixed: 'right', title:'操作', toolbar: '#test-table-toolbar-barDemo', width:302}
        ]];
        // 数据渲染
        table.render({
            elem: '#test-table-toolbar'
            ,url: '${pageContext.request.contextPath}/back/filmList'
            ,where:{
                pageNum:'1',
                pageSize:'10',
                filmName:null,
                filmReleaseTime:null,
                filmStatus:null
            }
            ,toolbar: '#test-table-toolbar-toolbarDemo'
            ,title: '影片数据表'
            ,cols: cols
            ,page: true
            ,parseData: function (res) {
                return {
                    "code":0,
                    "msg":"",
                    "count":res.total,
                    "data":res.list
                }
            }
        });

        //监听行工具事件
        // 删除事件
        table.on('tool(test-table-toolbar)', function(obj){
            var data = obj.data;
            var filmId = data.filmId;
            var filmName = data.filmName
            if(obj.event === 'del'){
                layer.confirm('您确定删除影片：'+filmName+'？', function(index){
                    //向服务端发送删除指令，在这里可以使用Ajax异步
                    $.ajax({
                        type:'delete'
                        ,url:'${pageContext.request.contextPath}/back/deleteFilm/' + filmId
                        ,dataType:'json'
                        ,success:function(result) {
                            if (result == true) { //删除成功，刷新当前页表格
                                //删除对应行（tr）的DOM结构，并更新缓存
                                obj.del();
                                layer.close(index);
                                location.reload();
                            } else if (result == false) { //删除失败
                                layer.alert("删除失败");
                            }
                        }
                    });
                });
                // 修改事件
            } else if(obj.event === 'edit'){
                index = layer.open({
                    type : 1,
                    title : "影片信息修改",
                    area : ['600px','620px'],
                    content : $('#edit_from')
                });
                // 表单初始赋值
                form.val('example',{
                    "filmId" : data.filmId,
                    "filmName" : data.filmName,
                    "filmContent" : data.filmContent,
                    "filmRunTime" : data.filmRunTime,
                    "filmReleaseTime" : data.filmReleaseTime,
                    "filmCover" : data.filmCover,
                    "filmPrevue" : data.filmPrevue,
                    "filmStatus" : data.filmStatus
                });
            } else if(obj.event === 'detail') {
                index = layer.open({
                    type : 1,
                    title : "影片详情",
                    area : ['600px','620px'],
                    content : $("#detail_from")
                });
                $.ajax({
                    type:'get'
                    ,url:'${pageContext.request.contextPath}/back/film'
                    ,data:{filmId:data.filmId}
                    ,success:function (result) {
                        var actors = "";
                        $.each(result.actors,function (index,actor) {
                            actors += actor.actorName + "  ";
                        });
                        var filmTypes = "";
                        $.each(result.filmTypes,function (index,filmType) {
                            filmTypes += filmType.filmTypeName + "  ";
                        });
                        // 表单初始赋值
                        form.val('detailFilm',{
                            "filmId" : result.filmId,
                            "filmName" : result.filmName,
                            "filmContent" : result.filmContent,
                            "filmRunTime" : result.filmRunTime,
                            "filmReleaseTime" : result.filmReleaseTime,
                            "filmCover" : result.filmCover,
                            "filmPrevue" : result.filmPrevue,
                            "filmStatus" : result.filmStatus,
                            "actorList" : actors,
                            "filmTypeList" :filmTypes
                        });
                    }
                });
            } else if (obj.event === 'playPrevue') {
                index = layer.open({
                    type : 1,
                    title : "影片预告片",
                    area : ['1080px','600px'],
                    content : $("#playPrevue_from")
                });
                $.ajax({
                    type:'get'
                    ,url:'${pageContext.request.contextPath}/back/film'
                    ,data:{filmId:data.filmId}
                    ,success:function (result) {
                        $("#video").prop("src","${pageContext.request.contextPath}/download/video?fileName="+result.filmPrevue);
                    }
                });

            } else if (obj.event === 'playCover') {
                index = layer.open({
                    type : 1,
                    title : "影片封面",
                    area : ['400px','400px'],
                    content : $("#playCover_from")
                });
                $.ajax({
                    type:'get'
                    ,url:'${pageContext.request.contextPath}/back/film'
                    ,data:{filmId:data.filmId}
                    ,success:function (result) {
                        $("#img").prop("src","${pageContext.request.contextPath}/download/img?fileName="+result.filmCover);
                    }
                });

            }
        });

        // 执行正在的修改事件
        $(document).on("click","#onEditFilm",function () {
            var filmId = $("#editFilm input[name=filmId]").val();
            var filmName = $("#editFilm input[name=filmName]").val();
            var filmContent = $("#editFilm #editFilmContent").val();
            var filmRunTime = $("#editFilm input[name=filmRunTime]").val();
            var filmReleaseTime = $("#editFilm input[name=filmReleaseTime]").val();
            var filmCover = $("#editFilm input[name=filmCover]").val();
            var filmPrevue = $("#editFilm input[name=filmPrevue]").val();
            var filmStatus = $("#editFilm #editFilmStatus").val();
            $.ajax({
                type:'put'
                ,url:'${pageContext.request.contextPath}/back/updateFilm'
                ,data:{
                    filmId:filmId,
                    filmName:filmName,
                    filmContent:filmContent,
                    filmRunTime:filmRunTime,
                    filmReleaseTime:filmReleaseTime,
                    filmCover:filmCover,
                    filmPrevue:filmPrevue,
                    filmStatus:filmStatus
                }
                ,success:function (result) {
                    if (result == true) {
                        layer.close(index);
                        window.location.reload();
                    } else {
                        layer.alert("修改失败");
                    }
                }
            });
        });

        // 多条件查询
        $(document).on("click","#search",function () {
            var filmName = $('#searchFilmName').val();
            var filmReleaseTime = $('#searchFilmReleaseTime').val();
            var filmStatus = $('#searchFilmStatus').val();
            table.render({
                elem: '#test-table-toolbar'
                ,url: '${pageContext.request.contextPath}/back/filmList'
                ,where:{
                    pageNum:'1',
                    pageSize:'100',
                    filmName:filmName,
                    filmReleaseTime:filmReleaseTime,
                    filmStatus:filmStatus
                }
                ,toolbar: '#test-table-toolbar-toolbarDemo'
                ,title: '影片数据表'
                ,cols: cols
                ,page: true
                ,parseData: function (res) {
                    return {
                        "code":0,
                        "msg":"",
                        "count":res.total,
                        "data":res.list
                    }
                }
            });
        });

        // 弹出添加影片的模态框
        $(document).on("click","#insertFilm",function () {
            // 打开隐藏的增加表单
            index = layer.open({
                type : 1,
                title : "添加影片",
                area : ['600px','500px'],
                content : $('#add_from')
            });
            $.ajax({
                type:"get",
                url:'${pageContext.request.contextPath}/back/filmTypeLists',
                success:function (result) {
                    $.each(result,function (index,filmType) {
                        $("#filmTypeName1").append("<option value='"+filmType.filmTypeName+"' name='filmTypeName1'>"+filmType.filmTypeName+"</option>");
                        $("#filmTypeName2").append("<option value='"+filmType.filmTypeName+"' name='filmTypeName2'>"+filmType.filmTypeName+"</option>");
                        $("#filmTypeName3").append("<option value='"+filmType.filmTypeName+"' name='filmTypeName3'>"+filmType.filmTypeName+"</option>");
                    });
                    layui.form.render("select");
                },
                error:function () {
                    alert("异步请求失败");
                }
            });
        });

        // 文件导出
        // 导出影片信息表
        $(document).on("click","#exportFilm",function (ev) {
            location.href = "${pageContext.request.contextPath}/back/exportFilm";
        });

    });
</script>

<!-- 放置添加元素，默认隐藏 -->
<div id="add_from" style="display:none;width:300px;margin-top: 20px">
    <form class="layui-form" action="${pageContext.request.contextPath}/back/insertFilm" lay-filter="example" id="addFilm" enctype="multipart/form-data" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">影片名称</label>
            <div class="layui-input-block">
                <input style="width: 450px;" type="text" id="addFilmName" name="filmName" lay-verify="filmName" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">影片简介</label>
            <div class="layui-input-block">
                <textarea style="width: 450px;" id="addFilmContent" name="filmContent" placeholder="请输入" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">播放时长</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="addFilmRunTime" name="filmRunTime" placeholder="HH:mm:ss" lay-key="2">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">上映时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="addFilmReleaseTime" name="filmReleaseTime"  placeholder="yyyy-MM-dd" lay-key="3">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">封面上传</label>
            <div class="layui-input-block">
                <input type="file" id="inFilmCover" name="addfilmCover" class="layui-upload">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">预告上传</label>
            <div class="layui-input-block">
                <input type="file" id="inFilmPrevue" name="addfilmPrevue" class="layui-upload">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">影片类型</label>
                <div class="layui-input-block">
                    <select name="filmTypeName1" id="filmTypeName1">
                        <option value="">请选择标签</option>
                    </select>
                </div>
                <div class="layui-input-block">
                    <select name="filmTypeName2" id="filmTypeName2">
                        <option value="">请选择标签</option>
                    </select>
                </div>
                <div class="layui-input-block">
                    <select name="filmTypeName3" id="filmTypeName3">
                        <option value="">请选择标签</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-lg6">
            <label class="layui-form-label">演员名称</label>
            <div class="layui-input-block">
                <input style="width: 180px;" type="text" id="addActorname1" name="actorname1" lay-verify="filmName" autocomplete="off" class="layui-input">
                <input style="width: 180px;" type="text" id="addActorname2" name="actorname2" lay-verify="filmName" autocomplete="off" class="layui-input">
                <input style="width: 180px;" type="text" id="addActorname3" name="actorname3" lay-verify="filmName" autocomplete="off" class="layui-input">

            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="submit" value="确定添加" class="layui-btn">
            </div>
        </div>
    </form>
</div>

<!-- 放置修改元素，默认隐藏 -->
<div id="edit_from" style="display:none;width:300px;margin-top: 20px">
    <form class="layui-form" action="javascript:return false;" lay-filter="example" id="editFilm">
        <div class="layui-form-item" style="display:none">
            <label class="layui-form-label">影片编号</label>
            <div class="layui-input-block">
                <input type="text" style="width: 450px;" name="filmId" lay-verify="filmId" autocomplete="off"
                       class="layui-input" readonly="readonly">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">影片名称</label>
            <div class="layui-input-block">
                <input type="text" style="width: 450px;" name="filmName" lay-verify="filmName" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">影片简介</label>
            <div class="layui-input-block">
                <textarea style="width: 450px;" id="editFilmContent"  name="filmContent" placeholder="请输入" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">播放时长</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="editFilmRunTime" name="filmRunTime" placeholder="HH:mm:ss" lay-key="4">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">上映时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="editFilmReleaseTime" name="filmReleaseTime"  placeholder="yyyy-MM-dd" lay-key="5">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">影片封面</label>
            <div class="layui-input-block">
                <input type="text" name="filmCover" lay-verify="filmCover" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">影片预告片</label>
            <div class="layui-input-block">
                <input type="text" name="filmPrevue" lay-verify="filmPrevue" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">影片状态</label>
                <div class="layui-input-block" >
                    <select name="filmStatus" id="editFilmStatus">
                        <option value="0">上架</option>
                        <option value="1">下架</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" id="onEditFilm">确定修改</button>
            </div>
        </div>
    </form>
</div>

<!-- 放置查看元素，默认隐藏 -->
<div id="detail_from" style="display:none;width:300px;margin-top: 20px">
    <form class="layui-form" action="javascript:return false;" lay-filter="detailFilm" id="detailFilm">
        <div class="layui-form-item" style="display:none">
            <label class="layui-form-label">影片编号</label>
            <div class="layui-input-block">
                <input type="text" name="filmId" lay-verify="filmId" autocomplete="off"
                       class="layui-input" readonly="readonly">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">影片名称</label>
            <div class="layui-input-block">
                <input type="text" style="width: 450px;" name="filmName" lay-verify="filmName" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">影片简介</label>
            <div class="layui-input-block">
                <textarea style="width: 450px;" name="filmContent" placeholder="请输入" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">播放时长</label>
            <div class="layui-input-block">
                <input type="text" name="filmRunTime" lay-verify="filmRunTime" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上映时间</label>
            <div class="layui-input-block">
                <input type="text" style="width: 450px;" name="filmReleaseTime" lay-verify="filmReleaseTime" autocomplete="off" class="layui-input" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">影片封面</label>
            <div class="layui-input-block">
                <input type="text" style="width: 450px;" name="filmCover" lay-verify="filmCover" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">影片预告片</label>
            <div class="layui-input-block">
                <input type="text" style="width: 450px;" name="filmPrevue" lay-verify="filmPrevue" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">影片状态</label>
            <div class="layui-input-block">
                <input type="checkbox" name="filmStatus" lay-skin="switch" lay-text="下架|上架" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">演员名称</label>
            <div class="layui-input-block">
                <input type="text" style="width: 450px;" name="actorList" lay-verify="actorList" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">影片类型</label>
            <div class="layui-input-block">
                <input type="text" style="width: 450px;" name="filmTypeList" lay-verify="filmTypeList" autocomplete="off" class="layui-input">
            </div>
        </div>
    </form>
</div>

<!-- 放置查看预告片，默认隐藏 -->
<div id="playPrevue_from" style="display:none;width:300px;margin-top: 20px">
    <form class="layui-form" action="javascript:return false;" lay-filter="playPrevueFilm" id="playPrevueFilm">
        <div class="layui-form-item">
            <div class="layui-input-block" style="width:850px;height: 500px">
               <video id="video" src="#" controls="controls"></video>
            </div>
        </div>

    </form>
</div>
<!-- 放置查看封面，默认隐藏 -->
<div id="playCover_from" style="display:none;width:300px;margin-top: 20px">
    <form class="layui-form" action="javascript:return false;" lay-filter="playCoverFilm" id="playCoverFilm">
        <div class="layui-form-item">
            <div class="layui-input-block"  style="width:400px;height: 400px">
               <img id="img" src="#" />
            </div>
        </div>

    </form>
</div>
</body>
</html>
